<template>
  <view class="news-page">
    <!-- 页面标题栏 -->
    <view class="page-header">
      <text class="header-title">热门新闻</text>
    </view>

    <!-- 新闻列表 -->
    <view class="news-list">
      <!-- 新闻卡片（循环渲染） -->
      <view 
        v-for="(item, index) in newsList" 
        :key="index" 
        class="news-card"
        @click="goToDetail(item)"
      >
        <!-- 置顶标签（仅置顶新闻显示） -->
        <view class="top-tag" v-if="item.isTop">置顶</view>

        <!-- 新闻图片（支持单图/三图） -->
        <view class="news-images" v-if="item.images.length > 0">
          <image 
            v-for="(img, imgIdx) in item.images" 
            :key="imgIdx" 
            :src="img" 
            class="news-img"
            :style="{width: item.images.length === 1 ? '100%' : '32%'}"
          ></image>
        </view>

        <!-- 新闻内容 -->
        <view class="news-content">
          <text class="news-title">{{ item.title }}</text>
          <view class="news-meta">
            <text class="author">{{ item.author }}</text>
            <text class="time">{{ item.time }}</text>
            <text class="comments">{{ item.comments }} 评论</text>
          </view>
        </view>

        <!-- 搜索标签栏（模拟插槽效果） -->
        <view class="search-tags" v-if="item.showSearch">
          <text class="tag-label">热门搜索：</text>
          <view class="tag-item">今日金价</view>
          <view class="tag-item">精选好物</view>
          <view class="tag-item">天气预告</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 模拟新闻数据（直接可用，无需依赖外部数据）
      newsList: [
        {
          id: 1,
          title: "uni-app 3.0 正式发布，支持更多原生能力和跨端优化",
          isTop: true, // 置顶新闻
          author: "uni-app官方",
          time: "2025-11-17 09:30",
          comments: 568,
          images: [
            "https://img01.360buyimg.com/imagetools/jfs/t1/216522/24/26469/123456/647e36a8F78c4f5d8/abc1234567890.jpg" // 模拟图片地址
          ],
          showSearch: true // 显示搜索标签
        },
        {
          id: 2,
          title: "跨端开发技术交流会将于12月召开，行业专家齐聚分享最佳实践",
          isTop: false,
          author: "技术前沿",
          time: "2025-11-16 14:20",
          comments: 324,
          images: [
            "https://img02.360buyimg.com/imagetools/jfs/t1/210000/33/27000/98765/647e36a8F12345678/abcdef0123456.jpg",
            "https://img03.360buyimg.com/imagetools/jfs/t1/212345/12/26888/87654/647e36a8Fabcdef12/123456abcdef.jpg",
            "https://img04.360buyimg.com/imagetools/jfs/t1/215678/22/26555/76543/647e36a8F98765432/abc123def4567.jpg"
          ],
          showSearch: false
        },
        {
          id: 3,
          title: "小程序性能优化指南：如何将页面加载速度提升50%",
          isTop: false,
          author: "前端开发者",
          time: "2025-11-15 10:15",
          comments: 189,
          images: [], // 无图新闻
          showSearch: true
        },
        {
          id: 4,
          title: "2025年最值得关注的5个跨端框架，你用过几个？",
          isTop: false,
          author: "科技测评",
          time: "2025-11-14 16:40",
          comments: 452,
          images: [
            "https://img05.360buyimg.com/imagetools/jfs/t1/218901/31/26333/65432/647e36a8F34567890/def123456789a.jpg"
          ],
          showSearch: false
        }
      ]
    };
  },
  methods: {
    // 跳转到新闻详情页（可根据需求扩展）
    goToDetail(news) {
      uni.navigateTo({
        url: `/pages/newsDetail/newsDetail?id=${news.id}&title=${encodeURIComponent(news.title)}`
      });
    }
  }
};
</script>

<style scoped>
/* 页面整体样式 */
.news-page {
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 标题栏 */
.page-header {
  background-color: #4299e1;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 600;
  padding: 25rpx;
  text-align: center;
}

/* 新闻列表 */
.news-list {
  padding: 15rpx;
}

/* 新闻卡片 */
.news-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 15rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 置顶标签 */
.top-tag {
  position: absolute;
  background-color: #e53e3e;
  color: #ffffff;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 16rpx;
  top: 35rpx;
  left: 35rpx;
  z-index: 1;
}

/* 新闻图片容器 */
.news-images {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
  position: relative;
}

/* 新闻图片 */
.news-img {
  height: 180rpx;
  border-radius: 8rpx;
  object-fit: cover;
}

/* 新闻内容 */
.news-content {
  margin-bottom: 15rpx;
}

/* 新闻标题 */
.news-title {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  line-height: 40rpx;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 新闻元信息（作者/时间/评论） */
.news-meta {
  display: flex;
  justify-content: space-between;
  font-size: 22rpx;
  color: #999999;
}

/* 搜索标签栏 */
.search-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 15rpx;
  border-top: 1rpx solid #f0f0f0;
}

/* 标签标题 */
.tag-label {
  font-size: 22rpx;
  color: #666666;
  margin-right: 10rpx;
}

/* 标签项 */
.tag-item {
  font-size: 22rpx;
  color: #4299e1;
  border: 1rpx solid #4299e1;
  border-radius: 20rpx;
  padding: 4rpx 16rpx;
  margin-right: 12rpx;
  margin-bottom: 10rpx;
}
</style>